<template>
	<div class="borderAnimation z-ind-1" :style="BorderComputed">
		<text class='borderAnimation-content cen-cen z-ind-100'>边框动画003:
			<slot></slot>
		</text>
	</div>
</template>

<script>
	import {} from 'vue'
	export default {
		props: {
			// 盒子宽度
			width: {
				type: String,
				default: "400px"
			},
			// 盒子高度
			height: {
				type: String,
				default: "200px"
			},
			// 内边距
			padding: {
				type: String,
				default: "10px"
			},
			// 边框圆角度
			borderRadius: {
				type: String,
				default: "10px"
			},
			// 边框粗细
			borderWidth: {
				type: String,
				default: "10px"
			},
			// 文字颜色
			color: {
				type: String,
				default: "#fff"
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "#000"
			},
			// 盒子过渡动画时长
			transitionHover: {
				type: String,
				default: ".3s"
			},
			// 遮罩层背景颜色
			maskColor: {
				type: String,
				default: "rgba(89, 243, 33, 0.5)"
			},
			// 字体大小
			fontSize: {
				type: String,
				default: "14px"
			},
			// 配置背景颜色模块
			loadingBorderColor1: {
				type: String,
				default: "#d53e33"
			},
			loadingBorderColor2: {
				type: String,
				default: "#377af5"
			},
			// 边框渐变背景旋转颜色
			BorderRotateDeg: {
				type: String,
				default: "45deg"
			},
			// 动画时长
			aniDuration: {
				type: String,
				default: "4s"
			}
		},
		name: "borderAnimation",
		computed: {
			BorderComputed() {
				let obj = {
					'--width': this.width,
					'--height': this.height,
					'--padding': this.padding,
					'--borderRadius': this.borderRadius,
					"--borderWidth": this.borderWidth,
					'--color': this.color,
					'--bgColor': this.bgColor,
					'--transitionHover': this.transitionHover,
					'--maskColor': this.maskColor,
					'--fontSize': this.fontSize,

					"--loadingBorderColor1": this.loadingBorderColor1,
					"--loadingBorderColor2": this.loadingBorderColor2,
					"--BorderRotateDeg": this.BorderRotateDeg,

					"--aniDuration": this.aniDuration
				}
				return obj
			}
		},
		setup() {
			return {

			}
		}
	}
</script>


<style>
	@keyframes borderAnimation_rotate {
		from {
			transform: translate3d(-50%, -50%, 0) rotate(0deg);
		}

		to {
			transform: translate3d(-50%, -50%, 0) rotate(360deg);
		}
	}
</style>

<style>
	@keyframes borderAnimation__huerotate {
		0% {
			filter: hue-rotate(0deg);
		}

		100% {
			filter: hue-rotate(360deg);
		}
	}
</style>
<style scoped="scoped" lang="less">
	.borderAnimation {
		box-sizing: border-box;
		position: relative;
		cursor: pointer;
		user-select: none;
		overflow: hidden;
		text-align: center;


		width: var(--width);
		height: var(--height);
		padding: var(--padding);
		border-radius: var(--borderRadius);
		color: var(--color);
		background-color: var(--bgColor);
		transition: all var(--transitionHover);

		border: var(--borderWidth) solid;
		border-image: linear-gradient(var(--BorderRotateDeg), var(--loadingBorderColor1), var(--loadingBorderColor2)) 1;
		clip-path: inset(0px round 10px);
		animation: borderAnimation__huerotate var(--aniDuration) infinite linear;
		filter: hue-rotate(360deg);
	}

	// .borderAnimation::before {
	// 	content: "";
	// 	position: absolute;
	// 	left: 50%;
	// 	top: 50%;
	// 	transform: translate3d(-50%, -50%, 0);
	// 	height: 105%;
	// 	width: 105%;
	// 	z-index: 99;
	// 	border-radius: var(--borderRadius);
	// 	background-color: var(--maskColor);
	// }

	.borderAnimation-content {
		box-sizing: border-box;
		height: inherit;
		width: inherit;
		padding: var(--padding);
		font-size: var(--fontSize);

		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
